<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Form Example</title>
        
        <script type="text/javascript" src="js/mootools-core-1.3-full-compat.js"></script>
        
	<script type="text/javascript">
     
        // <![CDATA[
            
            function loadSwiff(){
                var swiff_obj = new Swiff('flash/temp.swf', {
                    id: 'mytemp', //IMPORTANT
                    width: 200,
                    height: 300,
                    params: {wmode: 'transparent'},
                    container: $('temp'), // Holds gauge, div...
                    vars: {range: '500',
                           title: 'My Temp Gauge', 
                           bgimage: 'images/temp.jpg'
                          }
                });
            }
            
            function update() {
                //some ajax code to get live data....
                // Your live values/data go here.
                var aVal = "0";  
                var aVal = document.myform.userval_a.value;
                
                document.myform.userval_a.value = aVal; 
                
                var livevals = document.getElementById("livevals");
                livevals.innerHTML = "Value: "+ aVal

                $('mytemp').SetVariable("tValue", aVal);
            }
            
            window.addEvent('domready', function() {
                
                loadSwiff(); // add our Flash
                
            });
            
        // ]]>            
	</script>

	<style type="text/css">
		body {
			background-color: #5F5F5F;
			color: #cccccc;
		}
		td {
			border: 1px solid #cccccc;
			padding: 10px;
		}
		a:link    {color: #cccccc; }
		a:visited {color: #c8c8c8; }
		a:active  {color: #cccccc; }
		a:hover   {color: #ffffff; }
	</style>

	</head>

<body>
	<table cellpadding="5px" width="250">
			<td>Form Example using Mootools 3</td>
		<tr>
			<td align="center">
			    <!-- IMPORTANT Set ID so SWFOject places your object. --> 
				<div id="temp"></div>
			</td>
		<tr>
			<td>	
				<form name="myform" action="" method="post">
				Enter value (1 to 500):<br />
				<input type="text" name="userval_a" size="4px" value="0"><br /><br />
				<input type="button" name="button" onClick="update();" value="Update">
			    </form>
			</td>
		<tr>
			<td>
				<div style="border: 1px solid #ffffff; padding: 10px; width: 250px;"><span id="livevals">Value: 0</span></div>
			</td>
		</tr>
	</table>
	
</body>
</html>
